How to create pie chart in react using material UI and DevExpress ? |
您所在的位置：网站首页 › react charts › How to create pie chart in react using material UI and DevExpress ? |
How to create pie chart in react using material UI and DevExpress ?
|
DevExpress: DevExpress is a package for controlling and building the user interface of the Window, Mobile, and other applications. Pie Charts: A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. It depicts a special chart that uses “pie slices”, where each sector shows the relative sizes of data. Steps for creating React Application And Installing Module: Step 1: Create a React application using the following command. npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command. cd foldernameStep 3: After creating the ReactJS application, install the required modules using the following command. npm i --save @devexpress/dx-react-core @devexpress/dx-react-chart npm install @material-ui/core npm i --save @devexpress/dx-react-chart-material-uiProject Structure: It will look like the following :  Project Structure Example: Now write down the following code in the App.js file. Here, the App is our default component where we have written our code. App.jsimport React from "react";import Paper from '@material-ui/core/Paper';import { Chart, PieSeries, Title} from '@devexpress/dx-react-chart-material-ui'; const App = () => { // Sample dataconst data = [ { argument:'Monday', value:10 }, { argument:'Tuesday', value:40 }, { argument:'Wednesday', value:10 }, { argument:'Thursday', value:20 }, { argument:'Friday', value:20 },];return ( );} export default App;Step to Run Application: Run the application using the following command from the root directory of the project: npm startOutput: Now open your browser and go to http://localhost:3000/, you will see the following output:  Output My Personal Notes arrow_drop_up |
【本文地址】